<template>
  <el-row :gutter="15">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-col :span="24">
        <!--业务问题-->
        <el-form-item :label="$t('largeModel.businessProblem')+':'" prop="businessProblem">
          <el-switch v-model="formData.businessProblem"></el-switch>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="formData.businessProblem">
        <!--大模型-->
        <el-form-item
          :label="$t('largeModel.largeModel')+':'"
          prop="largeModel"
          :rules="[{ required: formData.businessProblem,  message: $t('largeModel.largeModelTips'), trigger: ['change','blur']}]"
        >
          <el-select v-model="formData.largeModel" :placeholder="$t('largeModel.largeModelTips')" clearable :style="{width: '100%'}">
            <el-option
              v-for="(item, index) in largeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="formData.businessProblem">
        <!--提示词-->
        <el-form-item
          :label="$t('largeModel.tipWord')+':'"
          prop="tipWord"
          :rules="[{ required: formData.businessProblem,  message: $t('largeModel.selectTipWordTips'), trigger: ['change','blur']}]"
        >
          <el-select v-model="formData.tipWord" :placeholder="$t('largeModel.selectTipWordTips')" clearable :style="{width: '100%'}">
            <el-option
              v-for="item in promptList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="formData.businessProblem">
        <!--生成模式-->
        <el-form-item :label="$t('largeModel.mode')+':'" prop="mode" v-show="modeList.length">
          <el-select v-model="formData.mode" :placeholder="$t('largeModel.selectModeTip')" clearable :style="{width: '100%'}">
            <el-option
              v-for="item in modeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
              <span style="float: left">{{ item.name }}</span>
              <el-tooltip class="item" effect="dark" :content="$t('largeModel.commonModeTips')" placement="top" v-show="item.id == '1'">
                <span style="float: right;margin-top: 10px" class="el-icon-warning-outline"></span>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="$t('largeModel.precisionTips')" placement="top" v-show="item.id == '2'">
                <span style="float: right;margin-top: 10px" class="el-icon-warning-outline"></span>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="$t('largeModel.extensionTips')" placement="top" v-show="item.id == '3'">
                <span style="float: right;margin-top: 10px" class="el-icon-warning-outline"></span>
              </el-tooltip>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="formData.businessProblem">
        <!--温度-->
        <el-form-item :label="$t('largeModel.temperature')+':'" prop="temperature">
          <el-slider :max='2' :step='0.1' v-model="formData.temperature"></el-slider>
        </el-form-item>
      </el-col>
      <el-col :span="11" v-if="formData.businessProblem">
        <el-form-item label="Top-p:" prop="TopP">
          <el-slider :max='1' :step='0.1' v-model="formData.TopP"></el-slider>
        </el-form-item>
      </el-col>


      <el-col :span="24">
        <!--非业务问题-->
        <el-form-item :label="$t('largeModel.notBusinessProblem')+':'" prop="notBusinessProblem">
          <el-switch v-model="formData.notBusinessProblem"></el-switch>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="formData.notBusinessProblem">
        <!--大模型-->
        <el-form-item
          :label="$t('largeModel.largeModel')+':'"
          prop="notLargeModel"
          :rules="[{ required: formData.notBusinessProblem,  message: $t('largeModel.largeModelTips'), trigger: ['change','blur']}]"
        >
          <el-select v-model="formData.notLargeModel" :placeholder="$t('largeModel.largeModelTips')" clearable :style="{width: '100%'}">
            <el-option
              v-for="item in notLargeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="formData.notBusinessProblem">
        <!---提示词-->
        <el-form-item
          :label="$t('largeModel.tipWord')+':'"
          prop="notTipWord"
          :rules="[{ required: formData.notBusinessProblem,  message: $t('largeModel.selectTipWordTips'), trigger: ['change','blur']}]"
        >
          <el-select v-model="formData.notTipWord" :placeholder="$t('largeModel.selectTipWordTips')" clearable :style="{width: '100%'}">
            <el-option
              v-for="item in promptList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="formData.notBusinessProblem">
        <!---生成模式-->
        <el-form-item :label="$t('largeModel.mode')+':'" prop="notMode" v-show="notModeList.length">
          <el-select v-model="formData.notMode" :placeholder="$t('largeModel.selectModeTip')" clearable :style="{width: '100%'}">
            <el-option
              v-for="item in notModeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
              <span style="float: left">{{ item.name }}</span>
              <el-tooltip class="item" effect="dark" :content="$t('largeModel.commonModeTips')" placement="top" v-show="item.id == '1'">
                <span style="float: right;margin-top: 10px" class="el-icon-warning-outline"></span>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="$t('largeModel.precisionTips')" placement="top" v-show="item.id == '2'">
                <span style="float: right;margin-top: 10px" class="el-icon-warning-outline"></span>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="$t('largeModel.extensionTips')" placement="top" v-show="item.id == '3'">
                <span style="float: right;margin-top: 10px" class="el-icon-warning-outline"></span>
              </el-tooltip>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="formData.notBusinessProblem">
        <!---温度-->
        <el-form-item :label="$t('largeModel.temperature')+':'" prop="notTemperature">
          <el-slider :max='2' :step='0.1' v-model="formData.notTemperature"></el-slider>
        </el-form-item>
      </el-col>
      <el-col :span="11" v-if="formData.notBusinessProblem">
        <!---Top-p-->
        <el-form-item label="Top-p:" prop="notTopP">
          <el-slider :max='1' :step='0.1' v-model="formData.notTopP"></el-slider>
        </el-form-item>
      </el-col>
    </el-form>
  </el-row>
</template>

<script>
import {
  modelList,
  modelPromptList,
} from "@/api/aiccApi/aiccLargeModel";
export default {
  data(){
    let that = this;
    return {
      formData: {
        businessProblem: false,
        largeModel: '',
        tipWord: '',
        mode: '',
        temperature: 1,
        TopP: 0.1,

        notBusinessProblem: false,
        notLargeModel: '',
        notTipWord: '',
        notMode: '',
        notTemperature: 1,
        notTopP: 0.1
      },
      largeList: [], //大模型largeList
      notLargeList:[],
      promptList:[],
      modeList:[],
      notModeList:[],

    }
  },

  props:{
    modelContent:{
      type: String,
      default: () => {
        return ''
      }
    }
  },



  watch:{
    'formData.largeModel':{
      handler(val){
        let that = this;
        const commonMode =   {
          id:'1',
          name:this.$t('largeModel.commonMode') //普通模式
        };
        const precisionMode = {
          id:'2',
          name:this.$t('largeModel.precision') //精确模式
        };
        const extensionMode = {
          id:'3',
          name:this.$t('largeModel.extension') //拓展模式
        };
        that.modeList = [];
        that.formData.mode = '';
        setTimeout(()=>{
          const arr = that.largeList.filter(item=>{
            if(item.id == val){
              return item
            }
          });
          if(!arr.length){
            return
          };
          const pattern = arr[0].pattern;
          if(pattern !== null){
            const patternArr = pattern.split(',');
            patternArr.forEach((item)=>{
              if(item == 1){
                that.modeList.push(commonMode)
              }else if (item == 2){
                that.modeList.push(precisionMode)
              }else if (item == 3){
                that.modeList.push(extensionMode)
              }
            })
          }else{
            that.modeList = [];
          }
        },10)
      },
      immediate:true
    },
    'formData.notLargeModel':{
      handler(val){
        let that = this;
        const commonMode =   {
          id:'1',
          name:this.$t('largeModel.commonMode') //普通模式
        };
        const precisionMode = {
          id:'2',
          name:this.$t('largeModel.precision') //精确模式
        };
        const extensionMode = {
          id:'3',
          name:this.$t('largeModel.extension') //拓展模式
        };
        that.notModeList = [];
        that.formData.notMode = '';

        setTimeout(()=>{
          const arr = that.notLargeList.filter(item=>{
            if(item.id == val){
              return item
            }
          });
          if(!arr.length){
            return
          };
          const pattern = arr[0].pattern;
          if(pattern !== null){
            const patternArr = pattern.split(',');
            patternArr.forEach((item)=>{
              if(item == 1){
                that.notModeList.push(commonMode)
              }else if (item == 2){
                that.notModeList.push(precisionMode)
              }else if (item == 3){
                that.notModeList.push(extensionMode)
              }
            })
          }else{
            that.notModeList = [];
          }
        },10)
      }
    }
  },

  mounted(){
    this.getModelList();
    this.getPromptList();

    if(this.modelContent.length > 0){
      const modelContentArr = JSON.parse(this.modelContent);
      var businessInfo = {};
      var notBusinessInfo = {};
      modelContentArr.forEach(item=>{
        if(item.type == 1){
          businessInfo = item;
        }else if (item.type == 2){
          notBusinessInfo = item;
        }
      });

      console.log(businessInfo,'businessInfo');
      console.log(notBusinessInfo,'notBusinessInfo');

      this.formData={
          businessProblem: businessInfo.isOpen == 1 ? true : false,
          largeModel: businessInfo.modelId,
          tipWord: businessInfo.promatId,
          mode: businessInfo.pattern,
          temperature: businessInfo.temperature*1,
          TopP: businessInfo.top*1,

          notBusinessProblem: notBusinessInfo.isOpen == 1 ? true : false,
          notLargeModel:notBusinessInfo.modelId,
          notTipWord: notBusinessInfo.promatId,
          notMode:notBusinessInfo.pattern,
          notTemperature: notBusinessInfo.temperature*1,
          notTopP: notBusinessInfo.top*1
      };
    }
  },

  methods:{
    //获取模型列表
    getModelList(){
      const info = {
        current:1,
        size:10000,
        name:'',
        type:'',
      };
      modelList(info).then(res=>{
        if(res.data.code == 200){
          const Data = res.data.data;
          this.largeList = Data.records;
          this.notLargeList = Data.records;
        }
      })
    },

    //获取提示词列表
    getPromptList(){
      const info = {
        type:'',
        isDefault:'',
        name:'',
        current:1,
        size:10000,
        businessType:9
      };
      modelPromptList(info).then(res=>{
        if(res.data.code == 200){
          const Data = res.data.data;
          this.promptList = Data.records;
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">

</style>
